<template>
  <Transition name="action-buttons">
    <div v-if="visible" class="action-buttons-container">
      <div class="action-buttons-group">
        <!-- 返回首页 -->
        <button 
          class="action-btn home-btn"
          @click="goHome"
          :title="'返回首页'"
        >
          <i class="fas fa-home"></i>
          <span class="btn-text">首页</span>
        </button>
        
        <!-- 主题切换 -->
        <button 
          class="action-btn theme-btn"
          @click="toggleTheme"
          :title="currentTheme === 'light' ? '切换到暗色主题' : '切换到浅色主题'"
        >
          <i :class="currentTheme === 'light' ? 'fas fa-moon' : 'fas fa-sun'"></i>
          <span class="btn-text">{{ currentTheme === 'light' ? '暗色' : '浅色' }}</span>
        </button>
        
        <!-- 全屏切换 -->
        <button 
          class="action-btn fullscreen-btn"
          @click="toggleFullscreen"
          :title="isFullscreen ? '退出全屏' : '进入全屏'"
        >
          <i :class="isFullscreen ? 'fas fa-compress' : 'fas fa-expand'"></i>
          <span class="btn-text">{{ isFullscreen ? '退出' : '全屏' }}</span>
        </button>
        
        <!-- 分享 -->
        <button 
          class="action-btn share-btn"
          @click="shareContent"
          :title="'分享当前页面'"
        >
          <i class="fas fa-share-alt"></i>
          <span class="btn-text">分享</span>
        </button>
        
        <!-- 收藏 -->
        <button 
          class="action-btn bookmark-btn"
          @click="toggleBookmark"
          :class="{ 'bookmarked': isBookmarked }"
          :title="isBookmarked ? '取消收藏' : '收藏页面'"
        >
          <i :class="isBookmarked ? 'fas fa-bookmark' : 'far fa-bookmark'"></i>
          <span class="btn-text">{{ isBookmarked ? '已收藏' : '收藏' }}</span>
        </button>
        
        <!-- 打印 -->
        <button 
          class="action-btn print-btn"
          @click="printContent"
          :title="'打印页面'"
        >
          <i class="fas fa-print"></i>
          <span class="btn-text">打印</span>
        </button>
      </div>
      
      <!-- 折叠按钮 -->
      <button 
        class="action-btn collapse-btn"
        @click="toggleCollapsed"
        :title="isCollapsed ? '展开功能按钮' : '收起功能按钮'"
      >
        <i :class="isCollapsed ? 'fas fa-chevron-up' : 'fas fa-chevron-down'"></i>
      </button>
    </div>
  </Transition>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'

const props = defineProps({
  visible: {
    type: Boolean,
    default: true
  },
  currentTheme: {
    type: String,
    default: 'light'
  }
})

const emit = defineEmits(['toggle-theme', 'toggle-fullscreen', 'share', 'bookmark'])

const router = useRouter()

// 响应式状态
const isCollapsed = ref(false)
const isFullscreen = ref(false)
const isBookmarked = ref(false)

// 检查全屏状态
const checkFullscreen = () => {
  isFullscreen.value = !!document.fullscreenElement
}

// 检查收藏状态
const checkBookmarkStatus = () => {
  const currentUrl = window.location.href
  const bookmarks = JSON.parse(localStorage.getItem('bookmarkedPages') || '[]')
  isBookmarked.value = bookmarks.some(bookmark => bookmark.url === currentUrl)
}

// 功能函数
const goHome = () => {
  router.push('/')
}

const toggleTheme = () => {
  emit('toggle-theme')
}

const toggleFullscreen = async () => {
  try {
    if (!document.fullscreenElement) {
      await document.documentElement.requestFullscreen()
    } else {
      await document.exitFullscreen()
    }
  } catch (error) {
    console.error('全屏切换失败:', error)
  }
}

const shareContent = async () => {
  const shareData = {
    title: document.title,
    text: '我发现了一个很棒的Java学习资源！',
    url: window.location.href
  }
  
  try {
    if (navigator.share && navigator.canShare && navigator.canShare(shareData)) {
      await navigator.share(shareData)
    } else {
      // 降级方案：复制链接
      await navigator.clipboard.writeText(window.location.href)
      showToast('链接已复制到剪贴板')
    }
  } catch (error) {
    if (error.name !== 'AbortError') {
      console.error('分享失败:', error)
      // 再次尝试复制链接
      try {
        await navigator.clipboard.writeText(window.location.href)
        showToast('链接已复制到剪贴板')
      } catch (clipboardError) {
        console.error('复制失败:', clipboardError)
        showToast('分享失败，请手动复制链接')
      }
    }
  }
}

const toggleBookmark = () => {
  const currentUrl = window.location.href
  const currentTitle = document.title
  const bookmarks = JSON.parse(localStorage.getItem('bookmarkedPages') || '[]')
  
  if (isBookmarked.value) {
    // 取消收藏
    const updatedBookmarks = bookmarks.filter(bookmark => bookmark.url !== currentUrl)
    localStorage.setItem('bookmarkedPages', JSON.stringify(updatedBookmarks))
    isBookmarked.value = false
    showToast('已取消收藏')
  } else {
    // 添加收藏
    const newBookmark = {
      url: currentUrl,
      title: currentTitle,
      timestamp: Date.now()
    }
    bookmarks.push(newBookmark)
    localStorage.setItem('bookmarkedPages', JSON.stringify(bookmarks))
    isBookmarked.value = true
    showToast('已添加到收藏')
  }
}

const printContent = () => {
  // 创建打印样式
  const printStyles = `
    <style>
      @media print {
        body * { visibility: hidden; }
        .main-content, .main-content * { visibility: visible; }
        .main-content { position: absolute; left: 0; top: 0; width: 100%; }
        .action-buttons-container { display: none !important; }
        .toc-container { display: none !important; }
        .navbar { display: none !important; }
        .code-header { background: #f5f5f5 !important; }
        .code-block-wrapper { border: 1px solid #ddd !important; }
      }
    </style>
  `
  
  // 临时添加打印样式
  const styleElement = document.createElement('div')
  styleElement.innerHTML = printStyles
  document.head.appendChild(styleElement)
  
  // 打印
  window.print()
  
  // 清理样式
  setTimeout(() => {
    document.head.removeChild(styleElement)
  }, 1000)
}

const toggleCollapsed = () => {
  isCollapsed.value = !isCollapsed.value
}

// 显示提示消息
const showToast = (message) => {
  // 简单的Toast实现
  const toast = document.createElement('div')
  toast.className = 'toast-message'
  toast.textContent = message
  toast.style.cssText = `
    position: fixed;
    top: 20px;
    right: 20px;
    background: var(--color-primary);
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10000;
    animation: slideInRight 0.3s ease-out;
    font-size: 14px;
    font-weight: 500;
  `
  
  document.body.appendChild(toast)
  
  setTimeout(() => {
    toast.style.animation = 'slideOutRight 0.3s ease-in'
    setTimeout(() => {
      document.body.removeChild(toast)
    }, 300)
  }, 3000)
}

// 生命周期
onMounted(() => {
  checkFullscreen()
  checkBookmarkStatus()
  
  // 监听全屏变化
  document.addEventListener('fullscreenchange', checkFullscreen)
  
  // 添加Toast动画样式
  if (!document.querySelector('#toast-animations')) {
    const style = document.createElement('style')
    style.id = 'toast-animations'
    style.textContent = `
      @keyframes slideInRight {
        from { transform: translateX(100%); opacity: 0; }
        to { transform: translateX(0); opacity: 1; }
      }
      @keyframes slideOutRight {
        from { transform: translateX(0); opacity: 1; }
        to { transform: translateX(100%); opacity: 0; }
      }
    `
    document.head.appendChild(style)
  }
})

onUnmounted(() => {
  document.removeEventListener('fullscreenchange', checkFullscreen)
})
</script>

<style scoped>
/* 容器样式 */
.action-buttons-container {
  position: fixed;
  top: 120px;
  right: var(--space-lg);
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.action-buttons-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: all var(--transition-normal);
}

.action-buttons-container:has(.collapse-btn) .action-buttons-group {
  transform-origin: top center;
}

.action-buttons-container:has(.collapse-btn:hover) .action-buttons-group {
  transform: scale(1.02);
}

/* 按钮基础样式 */
.action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--transition-normal);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  box-shadow: var(--shadow-md);
  font-size: var(--font-size-lg);
}

.action-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1));
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.action-btn:hover::before {
  opacity: 1;
}

.action-btn:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.action-btn:active {
  transform: scale(0.95);
}

.btn-text {
  display: none;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  margin-left: var(--space-xs);
}

/* 按钮主题样式 */
.home-btn {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-hover));
  color: var(--text-inverse);
}

.theme-btn {
  background: linear-gradient(135deg, var(--color-warning), var(--color-warning-hover));
  color: var(--text-inverse);
}

.fullscreen-btn {
  background: linear-gradient(135deg, var(--color-secondary), var(--color-secondary-hover));
  color: var(--text-inverse);
}

.share-btn {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-hover));
  color: var(--text-inverse);
}

.bookmark-btn {
  background: linear-gradient(135deg, var(--color-gray-600), var(--color-gray-700));
  color: var(--text-inverse);
  transition: all var(--transition-normal);
}

.bookmark-btn.bookmarked {
  background: linear-gradient(135deg, var(--color-warning), var(--color-warning-hover));
  animation: bookmarkPulse 2s infinite;
}

@keyframes bookmarkPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.print-btn {
  background: linear-gradient(135deg, var(--color-gray-500), var(--color-gray-600));
  color: var(--text-inverse);
}

.collapse-btn {
  background: linear-gradient(135deg, var(--color-gray-400), var(--color-gray-500));
  color: var(--text-inverse);
  width: 48px;
  height: 48px;
  font-size: var(--font-size-md);
  margin-top: var(--space-sm);
}

/* 折叠状态 */
.action-buttons-container:has(.collapse-btn) .action-buttons-group {
  max-height: 1000px;
  overflow: hidden;
  transition: max-height var(--transition-normal), opacity var(--transition-normal);
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .action-buttons-container {
    right: var(--space-md);
  }
  
  .action-btn {
    width: 50px;
    height: 50px;
    font-size: var(--font-size-md);
  }
  
  .collapse-btn {
    width: 44px;
    height: 44px;
  }
}

@media (max-width: 768px) {
  .action-buttons-container {
    top: 80px;
    right: var(--space-sm);
    flex-direction: row;
    flex-wrap: wrap;
    max-width: calc(100vw - 32px);
    justify-content: flex-end;
  }
  
  .action-buttons-group {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  
  .action-btn {
    width: 44px;
    height: 44px;
    font-size: var(--font-size-sm);
  }
  
  .collapse-btn {
    width: 40px;
    height: 40px;
    margin-top: 0;
    margin-left: var(--space-sm);
  }
  
  /* 移动端显示文字 */
  .action-btn {
    width: auto;
    min-width: 44px;
    padding: 0 var(--space-sm);
    border-radius: var(--radius-lg);
  }
  
  .btn-text {
    display: block;
  }
  
  .action-btn i {
    margin-right: var(--space-xs);
  }
}

/* 动画 */
.action-buttons-enter-active,
.action-buttons-leave-active {
  transition: all var(--transition-normal);
}

.action-buttons-enter-from {
  transform: translateX(100%);
  opacity: 0;
}

.action-buttons-leave-to {
  transform: translateX(100%);
  opacity: 0;
}

/* 悬浮动画 */
.action-btn {
  animation: float 6s ease-in-out infinite;
}

.action-btn:nth-child(2) { animation-delay: -1s; }
.action-btn:nth-child(3) { animation-delay: -2s; }
.action-btn:nth-child(4) { animation-delay: -3s; }
.action-btn:nth-child(5) { animation-delay: -4s; }
.action-btn:nth-child(6) { animation-delay: -5s; }

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-3px); }
}

/* 禁用悬浮动画在悬停时 */
.action-btn:hover {
  animation-play-state: paused;
}

/* 高对比度支持 */
@media (prefers-contrast: high) {
  .action-btn {
    border: 2px solid var(--text-primary);
  }
}

/* 减少动画支持 */
@media (prefers-reduced-motion: reduce) {
  .action-btn {
    animation: none;
    transition: none;
  }
  
  .action-btn:hover {
    transform: none;
  }
}
</style> 